<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./login.css">
</head>
<body>
    <div class="container">
        <div class="site-logo">
            <img src="./imgs/logo_pass.png" alt="">
        </div>
        <!-- 主要内容部分 -->
        <div class="content">
            <!-- 登录表单 -->
            <div class="login-form float-right">
                <form>
                    <div class="logo">
                        <img src="./imgs/loginlogo.gif" alt="">
                        <span id="mode_title">扫码登录</span>
                    </div>
                    <!-- 扫码登录 -->
                    <div id="qr-login">
                        <div id="qr-code">
                            <img id="img_code" src="./imgs/qrcode.png" alt="">
                            <img height="150" src="./imgs/qrcodeLoginGuide.png" alt="">
                        </div>
                        <div>
                            请使用百度App扫码登录
                        </div>
                        <div>
                            <span>安全</span>
                            <span>高效</span>
                            <span>便捷</span>
                        </div>
                    </div>
                    <div id="user-login">
                        <div class="error-notice"></div>
                        <div>
                            <input class="box" type="text" id="user" placeholder="手机/邮箱/用户名" />
                        </div>
                        <div>
                            <input class="box" type="password" id="pwd" placeholder="密码" />
                        </div>
                        <div>
                            <label>
                                <input type="checkbox">
                                <span class="next_login">下次自动登录</span>
                            </label>
                        </div>
                        <div><button type="button" id="denglu">登录</button></div>
                        <div>
                            <a href="#">忘记密码?</a>
                        </div>
                    </div>
                </form>
                <div class="bottom">
                    <span class="float-left" id="show_login_mode">用户名登录</span>
                    <a class="float-right" href="./百度用户注册.html">立即注册</a>
                    <br class="clear">
                </div>
            </div>
            <br class="clear">
        </div>
    </div>
    <script>
        var span = document.querySelector('#show_login_mode');
        var qrLogin = document.querySelector('#qr-login');
        var userLogin = document.querySelector('#user-login');
        // 登录方式状态
        var loginType = 'qr';

        span.onclick = function(){
            if(loginType == 'qr'){ // 判断当前是否为二维码登录
                userLogin.style.display = 'block';
                qrLogin.style.display = 'none';
                loginType = 'user'
            }else{ 
                userLogin.style.display = 'none';
                qrLogin.style.display = 'block';
                loginType = 'qr'
            }
        };
        // 获取要验证的表单元素
        var user = document.querySelector('#user');
        var pwd = document.querySelector('#pwd');
        var btn = document.querySelector('#denglu');
        var err = document.querySelector('.error-notice');
        btn.onclick = function(){
            if(user.value == ''){
                err.innerHTML = '请您输入手机/邮箱/用户名';
            }else if(pwd.value == ''){
                err.innerHTML = '请您输入密码';
            }else{
                err.innerHTML = '帐号或密码错误，请重新输入或者<a href="#">找回密码</a>';
            }
        }

    </script>
</body>
</html>